<template>
	<view class="content poRel">
		<view class="hei20"></view>
		<view class="wid85 mar">
			<view class="dis disAl disJuB flwa" >
				<block v-for="(item,index) in imageList" :key="index">
					<view class="borRad20 mar-top30 poRel" style="width: 281rpx;height: 281rpx;overflow: hidden;">
						<view @click="shanchu(index)" class="poAbs" style="right: 0;top: 0;z-index: 5;">
							<uni-icons type="closeempty" class="close" size="20"></uni-icons>
						</view>
						<image src="../../static/shangchuan.png" class="wh100"></image>
					</view>
				</block>
				<view class="borRad20 mar-top30" v-if="imageList.length < 9" @click="shangImage"
					style="width: 281rpx;height: 281rpx;background-color: #F2F2F2;">
					<view style="height: 90rpx;"></view>
					<view class="mar" style="width: 72rpx;height: 59rpx;">
						<image src="../../static/shangchuan.png" class="wh100"></image>
					</view>
					<view class="foSi25 mar-top20 textCen" style="color: #989797;">
						<view>上传图片</view>
						<view>{{imageList.length}}/9</view>
					</view>
				</view>
			</view>
			<view class="hei80 mar-top30 dis disAl" style="border-bottom: 1px solid #D2D2D2;">
				<input class="foSi35 wid100" v-model="title" placeholder="填写标题会有更多赞呦~"/>
			</view>
			<view class="mar-top30" style="height: 256rpx;">
				<textarea class="wid100 foSi25" style="line-height: 40rpx;" placeholder="还有更多的想法也一起写到正文里吧~" v-model="text" auto-height />
			</view>
			<picker :value="cityIndex" @change="bindCityChange" :range-key="'title'" :range="addressList">
				<view class="mar-top10 dis disAl" >
					<uni-icons type="location" size="35rpx"></uni-icons>
					<view class="mar-left10 mar-right10 foSi25">{{city?city.title:'添加地址'}}</view>
					<uni-icons type="right" size="25rpx"></uni-icons>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				imageList: [],
				title: '',
				text: '',
				addressList: [],
				cityIndex: 0,
				// 当前选择的城市
				city: null,
			}
		},
		onLoad() {
			this.addressList = uni.getStorageSync('address');
		},
		methods: {
			bindCityChange: function(e) {
				this.cityIndex = e.detail.value
				this.city = this.addressList[this.cityIndex]
			},
			shanchu(index){
				console.log(index)
				this.imageList.splice(index, 1);
			},
			//上传图片
			shangImage(){
				var that = this
				var count = 9 - that.imageList.length
				uni.chooseImage({
					count: count,
					success:(res)=>{
						that.imageList = that.imageList.concat(res.tempFilePaths);
						// for (var i=0; i<res.tempFilePaths.length; i++) {
						// 	that.shangchuan(res.tempFilePaths[i])
						// }
					},
				})
			},
			shangchuan(tempFilePaths){
				var that = this
				uni.uploadFile({
					url: that.global.url + 'api/qianyu_smfw/common/file_upload',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data);
							that.imageList = that.imageList.concat(apiresult.data);
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon:'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:'error',
							duration: 2000
						})
					}
				});
			},
		}
	}
</script>

<style>
	.content {}
</style>